<div class="yl2-content">
        <div class="primeng-datatable-container" style="margin-bottom: 30px;">
                <h5 class="mb-4"><i class="fa fa-table"></i> 工艺规程材料信息</h5>
                <p-table [value]="materials" [lazy]="true" (onLazyLoad)="getgy($event)" [scrollable]="true" scrollHeight="200px">
                        <ng-template pTemplate="header">
                            <tr>
                                <th style="text-align:center;">种类</th>
                                <th style=" text-align:center;">尺寸</th>
                                <th style=" text-align:center;">大小</th>
                                <th style=" text-align:center;">数量</th>
                                <th style="text-align:center;">
                                    状态
                                </th>
                                <th style="text-align:center;">
                                    牌号
                                </th>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-rowData>
                            <tr>
                                <td style="text-align:center;">
                                    {{ rowData.grade }}
                                </td>
                                <td style="text-align:center;">{{ rowData.spec }}</td>
                                <td style="text-align:center;">{{ rowData.size }}</td>
                                <td style="text-align:center;">
                                    {{ rowData.number }}
                                </td>
                                <td style="text-align:center;">
                                    {{ rowData.materialStatus}}
                                </td>
                                <td style="text-align:center;">{{ rowData.paiHao }}</td>
                            </tr>
                        </ng-template>
                    </p-table>
            </div>


    <div class="primeng-datatable-container" style="margin-bottom: 30px;">
            <h5 class="mb-4"><i class="fa fa-cubes"></i> 物料预定信息</h5>
        <p-table
            [value]="reserve"
            rows="10"
            [paginator]="false"
            [scrollable]="true"
                scrollHeight="200px"
            ScrollWidth="100%"
            [responsive]="primengTableHelper.isResponsive"
            [resizableColumns]="primengTableHelper.resizableColumns"
        >
            <ng-template pTemplate="header">
                <tr>
                    <th width="80px">
                        预定数量
                    </th>
                    <th width="120px">
                        合格证
                    </th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-record>
                <tr>
                    <td width="80px">
                        {{ record.itemAmount }}
                    </td>
                    <td width="120px">
                        {{ record.materialId }}
                    </td>
                </tr>
            </ng-template>
        </p-table>
    </div>

    <div class="primeng-datatable-container" style="margin-bottom: 30px;">
        <div *ngIf="outs.length" class="mb-4">
            <h5 class="mb-4"><i class="fa fa-list"></i> 出库信息</h5>
            <p-table
                [value]="outs"
                rows="10"
                [paginator]="false"
                [scrollable]="true"
                scrollHeight="200px"
                ScrollWidth="100%"
                [responsive]="primengTableHelper.isResponsive"
                [resizableColumns]="primengTableHelper.resizableColumns"
            >
                <ng-template pTemplate="header">
                    <tr>
                        <th width="80px">
                            出库数量
                        </th>
                        <th
                            *ngFor="let col of selectedColumns"
                            width="{{ col.width }}"
                        >
                            {{ col.header }}
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-record>
                    <tr>
                        <td width="80px">{{ record.itemAmount }}</td>
                        <td
                            *ngFor="let col of selectedColumns"
                            width="{{ col.width }}"
                        >
                            {{ record[col.field] }}
                        </td>
                    </tr>
                </ng-template>
            </p-table>
        </div>
        <div>
            <h5 class="mb-4"><i class="fa fa-table"></i> 材料信息</h5>
            <p-table
                #dataTable
                (onLazyLoad)="getCharges($event)"
                [value]="charges"
                rows="10"
                [paginator]="false"
                [lazy]="true"
                dataKey="id"
                [scrollable]="true"
                ScrollWidth="100%"
                scrollHeight="200px"
                [responsive]="primengTableHelper.isResponsive"
                rowExpandMode="multiple"
                [resizableColumns]="primengTableHelper.resizableColumns"
            >
                <ng-template pTemplate="caption">
                    <div class="row align-items-center m--margin-bottom-10">
                        <div class="col-xl-4" style="text-align:left">
                            <p-multiSelect
                                [options]="cols"
                                [(ngModel)]="selectedColumns"
                                optionLabel="header"
                                selectedItemsLabel="已选择 {0} 列"
                                [style]="{ padding: 0 }"
                                defaultLabel="Choose Columns"
                            ></p-multiSelect>
                        </div>
                        <div class="col-xl-8">
                            <div
                                class="form-group m-form__group align-items-center mb-0"
                            >
                                <div class="input-group">
                                    <input
                                        class="form-control m-input"
                                        autoFocus
                                        type="text"
                                        placeholder="搜索..."
                                        (keyup)="getCharges($event)"
                                        [(ngModel)]="filterText"
                                        style="width:auto"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </ng-template>
                <ng-template pTemplate="header">
                    <tr>
                        <th style="width: 25px"></th>
                        <th width="80px">
                            库存总量
                        </th>
                        <th
                            *ngFor="let col of selectedColumns"
                            width="{{ col.width }}"
                        >
                            {{ col.header }}
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-record let-expanded="expanded">
                    <tr>
                        <td style="width: 25px">
                            <a href="javascript:;" [pRowToggler]="record">
                                <i
                                    [ngClass]="
                                        expanded
                                            ? 'pi pi-chevron-down'
                                            : 'pi pi-chevron-right'
                                    "
                                ></i>
                            </a>
                        </td>
                        <th width="80px">
                            {{ record.materialForProduct.itemAmount }}
                        </th>
                        <td
                            *ngFor="let col of selectedColumns"
                            width="{{ col.width }}"
                        >
                            {{ record.materialForProduct[col.field] }}
                        </td>
                    </tr>
                </ng-template>
                <ng-template pTemplate="rowexpansion" let-record>
                    <tr>
                        <td [attr.colspan]="selectedColumns.length + 2">
                            <tr>
                                <th width="100px">出库</th>
                                <th width="80px">可用数量</th>
                                <th width="200px">位置</th>
                                <th></th>
                            </tr>

                            <tr>
                                <th width="100px">
                                    <button
                                        type="button"
                                        class="btn btn-success btn-sm"
                                        (click)="
                                            yl2OutModal.show(
                                                record.id,
                                                record.materialForProduct.id,
                                                pipe.barCode,
                                                pipe.id
                                            )
                                        "
                                    >
                                        出库
                                    </button>
                                </th>
                                <td width="80px">
                                    {{ record.materialForProduct.itemAmount }}
                                </td>
                                <td width="200px">
                                    {{ record.locationOfMaterial.displayName }}
                                </td>
                                <td></td>
                            </tr>
                        </td>
                    </tr>
                </ng-template>
            </p-table>
            <div
                class="primeng-no-data"
                *ngIf="primengTableHelper.totalRecordsCount == 0"
            >
                没有找到适合的材料
            </div>
            <div class="primeng-paging-container">
                <p-paginator
                    rows="5"
                    #paginator
                    (onPageChange)="getCharges($event)"
                    [totalRecords]="primengTableHelper.totalRecordsCount"
                    [rowsPerPageOptions]="
                        primengTableHelper.predefinedRecordsCountPerPage
                    "
                >
                </p-paginator>
                <span class="total-records-count">
                    总计：{{ primengTableHelper.totalRecordsCount }}
                </span>
            </div>
        </div>
    </div>
    <yl2OutModal #yl2OutModal (modalSave)="reloadPage()"></yl2OutModal>
</div>
